<template>
  <el-main>
    <h1>{{ questionnaireDesc }}详情</h1>
    <el-table :data="tableData" stripe style="width: 100%" border>
      <el-table-column label="问题ID" prop="id"></el-table-column>
      <el-table-column label="问题简介" prop="desc"></el-table-column>
      <el-table-column label="问题排序" prop="orderNum"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleInfo(scope.$index, scope.row)">选项详情</el-button>
          <el-button size="mini" @click="handleUpdate(scope.$index, scope.row)">修改答案</el-button>
          <el-button size="mini" @click="handleDelete(scope.$index, scope.row)" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="answerDesc" :visible.sync="dialogVisible" width="30%">
      <el-table :data="answerAndScore" stripe style="width: 100%" border>
        <el-table-column label="选项" prop="answer"></el-table-column>
        <el-table-column label="分值" prop="score"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="addDialogVisible" title="新增问题" width="30%">
      <span>
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" class="demo-ruleForm" label-width="100px" status-icon>
          <el-form-item label="问题简介" prop="desc">
            <el-input v-model="ruleForm.desc" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="问题排序" prop="orderNum">
            <el-input v-model="ruleForm.orderNum" autocomplete="off" type="number"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
            <el-button @click="resetForm('ruleForm')">取 消</el-button>
          </el-form-item>
        </el-form>
      </span>
    </el-dialog>
    <div style="margin-top: 20px">
      <el-button @click="addDialogVisible = true">新增问题</el-button>
      <el-button @click="backHome()">返回</el-button>
    </div>
  </el-main>
</template>

<script>
export default {
  name: "Question",
  data() {
    return {
      questionnaireDesc: '',
      dialogVisible: false,
      tableData: [],
      answerDesc: '',
      answerAndScore: [],
      addDialogVisible: false,
      questionnaireId: 0,
      ruleForm: {
        orderNum: '',
        desc: ''
      },
      rules: {
        orderNum: [
          {required: true, message: '请输入排序', trigger: 'blur'}
        ],
        desc: [
          {required: true, message: '请输入问题简介', trigger: 'blur'}
        ]
      }
    }
  },
  created() {
    if (this.$store.state.token == null) this.$router.push({path: "/login"});
    this.questionnaireId = this.$route.params.questionnaireId;
    this.$axios({
      // 通过axios向后端发送请求
      method: "get",
      url: "/questionnaire/" + this.questionnaireId + "/all"
    }).then(res => {
      // console.log(res);
      var data = res.data;
      if (data.code == 200) {
        this.questionnaireDesc = data.data.desc;
        this.tableData = data.data.questionList;
      } else {
        this.$message({
          message: data.msg,
          type: "error"
        });
        this.$router.push({path: "/"});
      }
    });
  },
  methods: {
    handleInfo(index, row) {
      // console.log(index, row);
      this.answerDesc = row["desc"];
      let answerData = row["answerList"];
      this.answerAndScore = [];
      if (answerData.answer != null) {
        for (let i = 0; i < answerData.answer.length; i++) {
          this.answerAndScore.push({answer: answerData.answer[i], score: answerData.score[i]});
        }
      }
      this.dialogVisible = true;
    },
    handleUpdate(index, row) {
      this.$router.push({name: "Answer", params: {questionnaireId: row["questionnaireId"], questionId: row["id"]}});
    },
    handleDelete(index, row) {
      // console.log(index, row);
      this.$axios({
        // 通过axios向后端发送请求
        method: "delete",
        url: "/questionnaire/" + this.questionnaireId + "/" + row["id"]
      }).then(res => {
        // console.log(res);
        var data = res.data;
        if (data.code == 200) {
          this.$message({
            message: row["desc"] + "删除成功",
            type: "success"
          });
          this.$router.replace("/refresh");
        } else {
          this.$message({
            message: data.msg,
            type: "error"
          });
          this.$router.push({path: "/"});
        }
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios({
            // 通过axios向后端发送请求
            method: "post",
            url: "/questionnaire/" + this.questionnaireId + "/add",
            data: {
              desc: this.ruleForm.desc,
              orderNum: this.ruleForm.orderNum
            }
          }).then(res => {
            // console.log(res);
            var data = res.data;
            if (data.code == 200) {
              this.$message({
                message: "新增成功",
                type: "success"
              });
              this.$router.replace({path: "/refresh"});
            } else {
              this.$message({
                message: data.msg,
                type: "error"
              });
            }
          });
        } else {
          this.$message({
            message: "信息不全",
            type: "error"
          });
          return false;
        }
        this.addDialogVisible = false;
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.addDialogVisible = false;
    },
    backHome() {
      this.$router.go(-1);
    }
  }
}
</script>